/* eslint-disable no-sequences */
<template>
  <div class="container">
    <el-card>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right" v-if="$route.query.name">
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>{{$route.query.name}}</el-breadcrumb-item>
        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 头部区域 -->
      <el-row>
        <el-col :span="2" class="mulu">
          <span>目录名称</span>
        </el-col>
        <el-col :span="4">
          <el-input
            placeholder="请输入内容"
            class="input-with-select"
            v-model.trim="queryInfo.directoryName"
          >
          </el-input>
        </el-col>
        <el-col :span="1" class="mulu">
          <span>状态</span>
        </el-col>
        <el-col :span="4">
          <el-select v-model.trim="queryInfo.state" placeholder="请选择">
            <el-option label="启用" value="1"></el-option>
            <el-option label="禁用" value="0"></el-option>
          </el-select>
        </el-col>
        <el-col :span="1" class="rerach">
          <el-button @click="clearlist">清除</el-button>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="searchlist">搜索</el-button>
        </el-col>
        <el-col class="addmulu" :span="2">
          <el-link v-if="$route.query.name" icon="el-icon-back" type="primary" :underline="false" @click="$router.back()">返回学科</el-link>
          <el-button type="success" icon="el-icon-edit" @click="addlistcata"
            >新增目录</el-button
          >
        </el-col>
      </el-row>
      <!-- 警告条 -->
      <el-alert
        :title="'数据一共' + ' ' + total + ' ' + '条'"
        type="info"
        class="warning"
        show-icon
        :closable="false"
      >
      </el-alert>
      <!-- 表格区域 -->
      <el-table :data="list">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column label="所属学科" prop="subjectName"></el-table-column>
        <el-table-column
          label="目录名称"
          prop="directoryName"
        ></el-table-column>
        <el-table-column label="创建者" prop="username"></el-table-column>
        <el-table-column label="创建日期" prop="addDate" width="200px">
          <template slot-scope="{ row }">
            {{ row.addDate | parseTime}}
          </template>
        </el-table-column>
        <el-table-column label="面试题数量" prop="totals"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="{ row }">
            {{ row.state == 1 ? "已启用" : "未启用" }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220px">
          <template slot-scope="{ row }">
            <el-button size="mini" class="addcolor" @click="updatastate(row)">{{
              row.state == 1 ? "禁用" : "启用"
            }}</el-button>
            <el-button
              size="mini"
              :disabled="row.state === 1 ? true : false"
              :class="row.state === 1 ? '' : 'addcolor'"
              @click="editcataupdate(row)"
              >修改</el-button
            >
            <el-button
              size="mini"
              :disabled="row.state === 1 ? true : false"
              :class="row.state === 1 ? '' : 'addcolor'"
              @click="removelist(row)"
              >删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->

      <div class="fenye">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryInfo.pagenum"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="queryInfo.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>

      <!-- visible.sync属性控制用户的显示与隐藏 -->
      <el-dialog
        title="目录名称"
        :visible.sync="addcatalog"
        width="30%"
        v-if="addcatalog"
      >
        <!-- 添加目录展示框  -->
        <directorys-add :cataAdd="cataadd" @addcata="addcataboom" />
      </el-dialog>
      <!-- 修改目录弹窗 -->
      <el-dialog
        title="目录名称"
        :visible.sync="editcatalog"
        width="30%"
        v-if="editcatalog"
      >
        <!-- 主体区域 -->
        <el-form
          :model="editcata"
          status-icon
          :rules="editrules"
          ref="editForm"
          label-width="80px"
        >
          <el-form-item label="所属学科" prop="xueke" v-if="!$route.query.id">
            <el-select
              v-model="editcata.xueke"
              placeholder="请选择学科"
              class="editselect"
            >
              <el-option
                v-for="(item, index) in editupdatecata"
                :key="index"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录名称" prop="editname">
            <el-input
              placeholder="请输入目录名称"
              v-model="editcata.editname"
            ></el-input>
          </el-form-item>
        </el-form>
        <!-- 底部区域 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="editcatalog = false">取 消</el-button>
          <el-button type="primary" @click="editcatainfo">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import {
  list,
  remove,
  update,
  changeState
} from '@/api/hmmm/directorys.js'
import { simple } from '@/api/hmmm/subjects.js'

import DirectorysAdd from '../components/directorys-add.vue'
export default {
  components: {
    DirectorysAdd
  },
  data () {
    return {
      options: [
        {
          value: '1',
          label: '已启用'
        },
        {
          value: '0',
          label: '未启用'
        }
      ],
      queryInfo: {
        // 当前的页码值
        page: 1,
        // 每页显示数据条数
        pagesize: 30,
        state: null,
        directoryName: null,
        subjectID: null
      },
      list: [],
      total: 0,
      value: '',
      addcatalog: false,
      cataadd: [],
      editcata: {
        xueke: 0,
        editname: ''
      },
      editrules: {
        editname: [
          {
            required: true,
            message: '请更新目录'
          },
          {
            min: 2,
            max: 8,
            message: '长度在 3 到 8 个字符',
            trigger: 'blur'
          }
        ],
        xueke: [
          {
            required: true,
            message: '请更新学科'
          }
        ]
      },
      editcatalog: false,
      editupdatecata: [],
      cataID: ''
    }
  },
  methods: {
    // 修改状态按钮
    async updatastate (row) {
      if (row.state === 1) {
        row.state = 0
        try {
          await changeState({
            id: row.id,
            state: row.state
          })
          this.$message.success('状态更新成功')
          this.getcatalist()
        } catch (err) {
          this.$message.error('状态更新失败')
        }
      } else {
        if (row.state === 0) {
          row.state = 1
          try {
            await changeState({
              id: row.id,
              state: row.state
            })
            this.$message.success('状态更新成功')
            this.getcatalist()
          } catch (err) {
            this.$message.error('状态更新失败')
          }
        }
      }
    },
    // 确认修改按钮
    async editcatainfo () {
      try {
        await update({
          id: this.cataID,
          subjectID: this.editcata.xueke,
          directoryName: this.editcata.editname
        })
        this.$message.success('更新成功')
        this.editcatalog = false
        this.getcatalist()
      } catch (err) {
        this.$message.error('修改失败')
      }
    },
    // 修改学科目录
    async editcataupdate (row) {
      this.cataID = row.id
      this.editcatalog = true
      try {
        const { data } = await simple()
        this.editupdatecata = data
      } catch (err) {
        this.$message.error('获取数据失败')
      }
      this.editcata.xueke = row.subjectID
      this.editcata.editname = row.directoryName
    },
    // 添加学科
    addcataboom () {
      this.getcatalist()
      this.addcatalog = false
    },
    // // 添加目录
    async addlistcata () {
      this.addcatalog = true
      try {
        const { data } = await simple()
        this.cataadd = data
      } catch (err) {
        this.$message.error('获取数据失败')
      }
    },
    async removelist (row) {
      const confirmResult = await this.$confirm(
        '此操作将永久删除该文件, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).catch(err => err)
      if (confirmResult !== 'confirm') { return this.$message.info('用户取消删除') }
      try {
        await remove(row)
        this.$message.success('删除成功')
        this.getcatalist()
      } catch (err) {
        this.$message.error('删除失败')
      }
    },
    // 点击查询
    async searchlist () {
      const { data: res } = await list(this.queryInfo)
      this.editupdatecata = res.items
      this.getcatalist()
    },
    // 清除输入框内容
    clearlist () {
      //   value:'',
      // message:'
      // eslint-disable-next-line no-unused-expressions
      this.queryInfo.state = null
      this.queryInfo.directoryName = null
      this.getcatalist()
    },
    // 获取资料
    async getcatalist () {
      try {
        if (this.$route.query.id) {
          this.queryInfo.subjectID = parseInt(this.$route.query.id)
        }
        const { data } = await list(this.queryInfo)
        this.list = data.items
        this.total = data.counts
      } catch (err) {
        this.$message.error('获取数据失败')
      }
    },
    handleSizeChange (newsize) {
      this.queryInfo.pagesize = newsize
      this.getcatalist()
    },
    handleCurrentChange (newnum) {
      this.queryInfo.page = newnum
      this.getcatalist()
    }
  },
  created () {
    this.getcatalist()
  },
  mounted () {},
  updated () {}
}
</script>

<style lang="scss" scoped>
.container {
  .el-breadcrumb {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ebeef5;
  }
  .el-row {
    position: relative;
    .mulu {
      text-align: right;
      line-height: 35px;
      font-weight: 700;
    }
    .el-col {
      margin-right: 15px;
    }
    .clear {
      width: 60px;
    }
    .rerach {
      margin-right: 30px;
    }
    .addmulu {
      width: 230px;
      display: flex;
      position: absolute;
      right: 15px;
      .el-link {
        margin-right: 10px;
      }
    }
  }
  .warning {
    margin-top: 20px;
  }
  .el-table {
    margin-top: 15px;
  }

  .addcolor {
    color: skyblue;
  }
  .fenye {
    display: flex;
    justify-content: flex-end;
    margin-top: 20px;
  }
  .el-dialog {
    min-width: 100%;
  }
  .el-select {
    min-width: 100%;
  }
}
</style>
